<template>

    <el-main>
        <el-table :data="this.$store.state.Goods.array.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            style="width: 85% ;font-size:15px" @row-click="UpDataUser">

            <el-table-column prop="id" label="账号">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0" style="color:aqua;">启用</span>
                    <span v-if="scope.row.status == 1" style="color:brown;">禁用</span>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="日期">
            </el-table-column>
            <el-table-column label="操作" width="250px">
                <template slot-scope="scope">
                    <router-link to="/home/UPGoods">
                        <el-button size="mini" @click.native.stop="edition(scope.row.id)">
                            编辑
                        </el-button>
                    </router-link>
                    <el-button size="mini" type="danger"
                        @click.native.stop="deleteGoodsSubmit(scope.row.id)">删除</el-button>
                    <el-button size="mini" :type="scope.row.status === 1 ? '' : 'danger'"
                        @click.native.stop="ModifyStatus(scope.row.id, scope.row.status)">{{ scope.row.status === 1
                            ? '启用' : '禁用' }}</el-button>
                </template>
            </el-table-column>
        </el-table>


        <div class="block">
            <el-pagination :current-page.sync="currentPage" @current-change="handleCurrentChange" :page-size="pageSize"
                layout="prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </el-main>


</template>

<script>

import NavMeunHead from './NavHead.vue';
import axios from 'axios';
export default {
    data() {
        return {
            tableData: [],
            array: [],
            pageSize: 10,
            currentPage: 0,
            total: 0,
            pagerCount: 0,
            User: {
                name: ''
            },
            arr: []
        }
    },
    methods: {
        UpDataUser(row, column, event) {
            // 在这里调用你的方法
            console.log('dfadsfads+++++++++++++' + row.id)
            this.$router.replace({ path: '/home/UPGoods' })

            let target = this.$store.state.Goods.tableData.filter(res => {
                return res.id == row.id
            });

            console.log(target);

            this.$store.state.Goods.name = target[0].name
            this.$store.state.Goods.date = target[0].date
            this.$store.state.Goods.address = target[0].address

        },
        visible_change() {
            const visiblechange = document.querySelector('el-dropdown')
            console.log(visiblechange.data);

        }, DropLogin(a) {
            this.$router.replace({ path: '/' })
        },
        SelectName() {
            this.array = this.$store.state.Goods.array
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        deleteGoodsSubmit(e1) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                axios({
                    methods: 'delete',
                    url: 'http://localhost:8090/Goods/DelGoods',
                    params: {
                        id: e1
                    }
                }).then((res) => {
                    if (res.data >= 1) {
                        this.a()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        console.log('删除失败');

                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }, edition(id) {

            let array = this.tableData.filter(res => {
                return res.id == id
            });
            this.$store.state.Goods.name = array[0].name
            this.$store.state.Goods.address = array[0].address
            this.$store.state.Goods.date = array[0].date
            this.$store.state.Goods.id = id
        }, ModifyStatus(id1, status1) {
            axios({
                methods: 'PUT',
                url: 'http://localhost:8090/Goods/ModifyUserStatus',
                params: {
                    id: id1,
                    status: status1
                }
            }).then((res) => {
                this.a()
                // if (res.data >= 1) {
                //     this.a()
                //     this.$message({
                //         type: 'success',
                //         message: '删除成功!'
                //     });
                // } else {
                //     console.log('删除失败');

                // }
            }).error(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // handleRowClick(row) {
        //     axios({
        //         methods: 'Get',
        //         url: 'http://localhost:8090/Goods/GetByID',
        //         params: {
        //             id: row.id
        //         }
        //     }).then(res => {
        //         console.log(res)
        //         this.$store.state.Goods.name = res.data.name
        //         this.$store.state.Goods.address = res.data.address
        //         this.$store.state.Goods.date = res.data.date
        //         this.$store.state.Goods.id = res.data.id

        //     })// 这里可以访问到当前行的id  
        //     // 你可以在这里根据row.id进行其他操作
        //     this.$router.push('/home/Personal_Central')
        // },
        a() {
            axios({
                methods: 'get',
                url: 'http://localhost:8090/Goods/list'
            }).then(res => {
                this.arr = res.data
                this.$store.state.Goods.tableData = res.data
                this.tableData = this.$store.state.Goods.tableData
                this.$store.state.Goods.array = this.tableData
                this.array = this.$store.state.Goods.array

                const size = this.tableData.length
                this.total = size
                this.pagerCount = size / this.pageSize
            })
        },
    },
    mounted() {
        this.a()
        this.SelectName()
    }, components: {
        NavMeunHead
    },
    watch: {
        User: {
            handler(a, b) {
                if (a == null || a == ' ') {
                    this.array = this.tableData
                }
            }
        }
    }
}
</script>

<style scoped>
.el-container {
    margin-left: 100px;
}

.el-dropdown {
    margin-left: 550px;

}

.el-main {
    margin-left: 50px;
}

.block {
    margin-left: 360px;
}
</style>